From 183efa0bf0394817ce74dc72e6d104c90b41cc04 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 11 Feb 2024 00:19:02 -0800
Subject: feat(tools): use error-style not found

---
 src/routes/tools/[tool]/+page.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'src/routes/tools/[tool]/+page.svelte')

diff --git a/src/routes/tools/[tool]/+page.svelte b/src/routes/tools/[tool]/+page.svelte
index 137df74d..12ecde4d 100644
--- a/src/routes/tools/[tool]/+page.svelte
+++ b/src/routes/tools/[tool]/+page.svelte
@@ -14,6 +14,7 @@
 	import Picker from '$lib/Tools/Picker.svelte';
 	import Likes from '$lib/Tools/Likes.svelte';
 	import root from '$lib/Utility/root.js';
+	import Popup from '$lib/Popup.svelte';
 
 	export let data;
 
@@ -31,8 +32,10 @@
 {#if !Object.keys(tools).includes(tool)}
 	<HeadTitle route="Tools" path="/tools" />
 
-	<div class="card">
-		<p>Tool not found.</p>
+	<Popup>
+		<p style="text-align: center;">
+			Tool "<a href={root(`/tools/${tool}`)}>{tool}</a>" not found
+		</p>
 
 		<blockquote style="margin: 0 0 0 1.5rem;">
 			Did you mean "<a
@@ -40,10 +43,10 @@
 				on:click={() => (tool = suggestion)}
 				style={suggestion === '...' ? 'pointer-events: none; color: inherit;' : ''}
 			>
-				{suggestion === '...' ? '...' : tools[suggestion].name}</a
+				{suggestion === '...' ? '...' : tools[suggestion].name()}</a
 			>"?
 		</blockquote>
-	</div>
+	</Popup>
 {:else}
 	<HeadTitle route={tools[tool].name()} path={`/tools?tool=${tool}`} />
 
-- 
cgit v1.2.3

